<!--
 * @Description:地图组件
 * @Author: gaoyunpeng
 * @Date: 2022-01-22 20:42:35
 * @LastEditors: gaoyunpeng
-->
<template>
  <div id="Map"></div>
</template>
<script>
import 'ol/ol.css'
import TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'
import { Map, View } from 'ol'
import { defaults as defaultControls } from 'ol/control'
import { fromLonLat } from 'ol/proj'

export default {
  data() {
    return {
      map: null
    }
  },
  methods: {
    initMap() {
      this.map = new Map({
        layers: [
          new TileLayer({
            source: new XYZ({
              url: 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
            })
          })
        ],
        target: 'Map',
        controls: defaultControls({
          zoom: false,
          attribution: false
        }).extend([]),
        view: new View({
          center: fromLonLat([104.065735, 33.659462]),
          zoom: 3.5
        })
      })
    }
  },
  mounted() {
    this.initMap()
  }
}
</script>

<style lang="scss" scoped>
#Map {
  width: 100%;
  height: 100%;
}
</style>
